<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/admin/common::common_head">
    <title>项目列表</title>
</head>
<style type="text/css">
    .icon-box {
        position: absolute;
        top: 1px;
        right: 10px;
    }

    .icon-box span {
        font-size: unset;
        cursor: pointer
    }

    .img-box img {
        height: 150px;
        margin: 0 auto;
    }
</style>
<body class="cm-no-transition cm-1-navbar">
<!--后台公共侧边栏（菜单）-->
<div th:replace="common/admin/common::common_siderbar"></div>
<!--后台公共顶部-->
<div th:replace="common/admin/common::common_top"></div>
<div id="global">
    <div class="container-fluid">
        <div class="row cm-fix-height">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-body" id="data-list-box">
                        <h4>商品列表</h4>
                        <div style="margin: 10px 0;">
                            <div class="btn-group" role="group">
                                <button @click="addGoods" class="btn btn-turquoise" type="button">
                                    <i class="fa fa-plus"></i> 添加
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <p class="lead text-center" v-if="goodsList.length == 0">
                                没有数据，快去添加吧！
                            </p>
                            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12" v-for="(goods, i) in goodsList" v-if="goodsList.length > 0">
                                <div class="icon-box">
                                    <span :class="goods.state ? 'label-warning' : 'label-success'" :title="goods.state ? '下架' : '上架'"
                                          @click="changeState(goods.id, goods.state, i)" class="label">
                                        <i :class="goods.state ? 'glyphicon-save' : 'glyphicon-open'" class="glyphicon"></i>
                                    </span>
                                    <span @click="editGoods(goods.id, goods.state, i)" class="label label-info" title="编辑">
                                        <i class="glyphicon glyphicon-edit"></i>
                                    </span>
                                    <span @click="removeGoods(goods.id, i)" class="label label-danger" title="删除">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </span>
                                </div>
                                <div :title="goods.name" class="thumbnail">
                                    <div class="img-box">
                                        <img :src="goods.img | imgFilter" alt="Responsive image" class="img-responsive">
                                    </div>
                                    <div class="caption detail-box">
                                        <h3 class="text-center" v-text="goods.name"></h3>
                                        <p class="text-center">
                                            <span>积分兑换：<b v-text="goods.price"></b></span>
                                        </p>
                                        <p class="text-center">
                                            <span>库存数量：<b v-text="goods.stock"></b></span>
                                        </p>
                                        <p class="text-center">
                                            <span>限兑/天：<b v-text="goods.limitExchange"></b></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer th:replace="common/admin/common::common_footer"></footer>
</div>

<script th:replace="common/admin/common::common_footer_script"></script>
<script th:src="@{/admin/assets/layer/layer.js}" type="text/javascript"></script>
<script th:src="@{/script/vue.min.js}"></script>
<script th:src="@{/script/axios.min.js}"></script>
<script type="text/javascript">
    document.title = '亿人宝 - 商品列表';

    function layerLoad() {
        return layer.load(0, {
            offset: ['50%', '50%']
        });
    }

    /**
     * 获取商品json数据
     * @param params
     */
    function refreshTable($table, params = {}) {
        let loadIndex = layerLoad();
        $.getJSON('[[@{/admin/integral-goods/listJson}]]', params, function (data) {
            console.log(data);
            layer.close(loadIndex);

            let str = buildTbodyStr(data.obj);
            $table.children('tbody').html(str);
        })
    }

    /**
     * 构建表格数据
     * @param $table
     * @param list
     */
    function buildTbodyStr(list) {
        let str = '';

        $.each(list, function (i, e) {
            str += '<tr>';
            str += '<td>' + e.id + '</td>';
            str += '<td>' + (null == e.name ? '' : e.name) + '</td>';
            str += '<td>' + (null == e.price ? '' : e.price) + '</td>';
            str += '<td>' + (null == e.stock ? '' : e.stock) + '</td>';
            str += '<td>' + (null == e.money ? '' : e.money) + '</td>';
            str += '<td>' + (null == e.img ? '' : e.img) + '</td>';
            str += '<td>' + (null == e.limitExchange ? '' : e.limitExchange) + '</td>';
            str += '<td>' + (null == e.type ? '' : e.type) + '</td>';
            str += '<td>' + (null == e.state ? '' : e.state) + '</td>';
            str += '<td>';
            str += '<div class="btn-group" role="group">';
            str += '<button class="btn btn-info get-action" data-id="' + e.id + '" title="查看" type="button">';
            str += '<i class="fa fa-fw fa-search-plus"></i>';
            str += '</button>';
            str += '<button class="btn btn-danger remove-action" data-id="' + e.id + '" data-name="' + e.name + '" title="删除" type="button">';
            str += '<i class="fa fa-fw fa-trash-o"></i>';
            str += '</button>';
            str += '</div>';
            str += '</td>';
            str += '</tr>';
        });

        $('.get-action').tooltip();
        $('.remove-action').tooltip();
        return str;
    }

    $(function () {
        // 加载数据
        // refreshTable($('#data-table'));
        const axiosInstance = axios.create({
            baseURI: '[[@{/admin/integral-goods}]]',
            timeout: 5000,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });

        let loadIndex;
        let v = new Vue({
            el: '#data-list-box',
            data: {
                goodsList: {}
            },
            filters: {
                imgFilter: function (value) {
                    return '[[@{/}]]' + value;
                }
            },
            methods: {
                addGoods: function () {
                    // 添加商品
                    layer.open({
                        id: 'modify-layer',
                        type: 2,
                        title: '添加商品',
                        content: '[[@{/admin/integral-goods/add-goods}]]',
                        shadeClose: true,
                        area: ['400px', '500px'],
                        scrollbar: false,
                        resize: true
                    });
                },
                editGoods: function (id, state, i) {
                    if (state) {
                        // 商品已上架，不能修改
                        layer.msg('商品已上架，不能修改！', {time: 1300});
                    } else {
                        // 编辑`商品
                        layer.open({
                            id: 'modify-layer',
                            type: 2,
                            title: '编辑商品',
                            content: '[[@{/admin/integral-goods/edit-goods/}]]' + id + '?i=' + i,
                            area: ['400px', '500px'],
                            scrollbar: false,
                            resize: true
                        });
                    }
                },
                removeGoods: function (id, i) {
                    if (v.goodsList[i].state) {
                        // 商品已上架，不能删除
                        layer.msg('商品已上架，不能删除！', {time: 1300});
                    } else {
                        // 移除商品
                        layer.confirm('确定要删除该商品吗？', {
                            title: '确认删除'
                        }, function () {
                            axiosInstance.delete('remove', {
                                params: {
                                    id: id
                                }
                            }).then(respose => {
                                let result = respose.data;
                                if (respose.status === 200 && result.status === 200 && result.obj) {
                                    v.$delete(v.goodsList, i);// 移除列表中需要删除的对象
                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    });
                                } else {
                                    layer.msg('服务器错误！');
                                }
                            }).catch(error => {
                                console.log(error);
                            });
                        });
                    }
                },
                changeState: function (id, state, i) {
                    // 更改商品状态，true为上架，反之下架
                    axios.post('changeGoodsState', {
                        uniqueIdentity: id,
                        s: !state
                    }).then((r) => {
                        console.log(r);
                        if (r.status === 200 && r.data.status === 200) {
                            v.goodsList[i].state = !state;
                        } else {
                            layer.msg(r.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }
            },
            beforeCreate: function () {
                console.log('beforeCreate', this);
            },
            created: function () {
                axiosInstance.get('listJson').then((response) => {
                    v.goodsList = response.data.obj;
                });
                console.log('created', this);
            },
            beforeMount: function () {
                console.log('before mount', this);
            },
            mounted: function () {
                console.log('mounted', this);
            },
            beforeDestroy: function () {
                console.log('beforeDestroy', this);
            },
            destroyed: function () {
                console.log('destroyed', this);
            },
            beforeUpdate: function () {// 页面数据更新之前执行
                loadIndex = layerLoad();
                console.log('before updated', this);
            },
            updated: function () {
                layer.close(loadIndex);
                console.log('updated', this);
            }
        });
        window.v = v;
    });
</script>
</body>
</html>